<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/imageview.css" />
		<style type="text/css">
			.mui-bar-nav~.mui-content {
				padding-top: 74px;
			}
			
			.mui-bar-nav {
				border-bottom: 1px solid #ccc;
			}
			
			.nav {
				overflow: hidden;
				position: fixed;
				top: 44px;
				background: #fff;
				width: 100%;
				text-align: center;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #eee;
				z-index: 1000;
			}
			
			.nav>div {
				float: left;
				width: 50%;
			}
			
			.nav .transition {
				width: 50%;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #bd212e;
				transition: .2s;
				-webkit-transition: .2s;
			}
			
			.nav>.check {
				color: #bd212e;
			}
			
			.nav>div:nth-child(1).check~.transition {
				left: 0;
			}
			
			.nav>div:nth-child(2).check~.transition {
				left: 50%;
			}
			
			.shopData {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				background: #fff;
				border-bottom: 1px solid #eee;
				padding: 8px 10px 8px 14px;
			}
			
			.shopData_img {
				width: 90px;
				min-width: 90px;
				height: 90px;
				margin-right: 10px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;
			}
			
			.shopData_img img {
				width: 100%;
				vertical-align: middle;
			}
			
			.shopData_text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
			}
			
			.shopData_main {
				position: relative;
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.shopData_foot {
				position: absolute;
				width: 100%;
				bottom: 0;
				font-size: 12px;
			}
			
			.shopData_foot>div:first-child {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.shopData_foot>div:last-child {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				line-height: 26px;
			}
			
			.remove_collection {
				min-width: 80px;
				height: 26px;
			}
			
			.remove_collection>button {
				height: 100%;
				width: 100%;
				padding: 0;
				background: #1abc9c;
				border-color: #1abc9c;
				border-radius: 10px;
				font-size: 12px;
			}
			
			.shopData_money {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.shopData_money {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			/*已评价的状态*/
			
			.comment_list {
				padding: 14px 14px 10px 14px;
				background: #fff;
				border-bottom: 1px solid #eee;
			}
			
			.comment_user {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.user_head {
				width: 50px;
				min-width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
				background: #eee;
				margin-right: 6px;
			}
			
			.user_head img {
				width: 100%;
				vertical-align: middle;
			}
			
			.user_name {
				font-size: 12px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.comment_text {
				margin: 10px 0;
			}
			
			.comment_img {
				overflow: hidden;
			}
			
			.comment_img>div {
				width: calc(100vw / 4);
				height: calc(100vw / 4);
				display: inline-block;
				margin: 0 3% 2% 0;
				background-size: cover;
				background-repeat: no-repeat;
				background-image: url(../../images/noimg.jpg);
			}
			
			.comment_img img {
				width: 100%;
				height: 100%;
				vertical-align: middle;
				opacity: 0;
			}
			
			.comment_shopping {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #eee;
				padding: 12px 0px 12px 12px;
			}
			
			.comment_shopping_img {
				width: 56px;
				min-width: 56px;
				margin-right: 6px;
			}
			
			.comment_shopping_img img {
				vertical-align: middle;
				width: 100%;
			}
			
			.comment_shopping_data {
				font-size: 12px;
				line-height: 16px;
				color: #666;
			}
			
			.comment_shopping_data>div {
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			
			.comment_shopping_data>div:first-child {
				color: #333;
				-webkit-line-clamp: 2;
			}
			/*没有商品*/
			
			.noshopp {
				display: none;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 12px;
				z-index: 10000;
				color: #666;
			}
			
			.noshopp img {
				margin-bottom: 30px;
				width: 50%;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div id="comment" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">我的评论</h1>
			</header>
			<div class="nav">
				<div :class="{check:state==2}" @tap="stateTap(2)">待评论</div>
				<div :class="{check:state==1}" @tap="stateTap(1)">已评论</div>
				<span class="transition"></span>
			</div>

			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div v-for="(list,index) in list">
						<div class="shopData" v-if="state ==2">
							<div class="shopData_img"><img v-lazy="imgCommonUrl + list.pic" /></div>
							<div class="shopData_main">
								<div class="shopData_text">{{list.prodName}}</div>
								<div class="shopData_foot">
									<div>{{list.attribute}}</div>
									<div>
										<div class="shopData_money">
											<!--评价可得50积分-->
										</div>
										<div class="remove_collection"><button type="button" class="mui-btn mui-btn-success" @tap="release(list)">发布评价</button></div>
									</div>
								</div>
							</div>
						</div>
						<!--已评价-->
						<div class="comment_list" v-else>
							<div class="comment_user">
								<div class="user_head"><img v-lazy="imgCommonUrl + userName.headImg" /></div>
								<div class="user_name">{{userName.nickName}}</div>
							</div>
							<div class="comment_text">{{list.content}}</div>
							<div class="comment_img">
								<!--list.photos-->
								<div v-for="photos in list.photos" :style="{backgroundImage : 'url('+imgCommonUrl+photos+')'}">
									<!--<img src="http://119.23.33.223:3004/photoserver//photoserver/images/0/2018/02/03/27507e06-3862-4756-a16c-900209c62e36.jpg"/>-->
									<img class="coverImg" :src='imgCommonUrl + photos' :data-preview-src='photos' :data-preview-group="index" />
								</div>
							</div>
							<div class="comment_shopping">
								<div class="comment_shopping_img"><img v-lazy="imgCommonUrl + list.pic" /></div>
								<div class="comment_shopping_data size">
									<div>{{list.prodName}}</div>
									<div>{{list.attribute}}</div>
									<!--<div>已好评，共获得50积分</div>-->
								</div>
							</div>
						</div>
					</div>
					<div></div>
				</div>
			</div>

			<div class="noshopp">
				<img src="../../images/noshop.png" alt="" />
				<div>无相关的评价记录哦</div>
			</div>

		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			mui.previewImage();
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/noimg.jpg',
				loading: '../../images/noimg.jpg'
			});
			var comments = new Vue({
				el: '#comment',
				data: {
					imgCommonUrl: common.imageUrl,
					pageNum: 1,
					list: [],
					state: 2,
					userName: ''
				},
				methods: {
					stateTap: function(index) {
						if(this.state == index) {
							return
						}
						this.pageNum = 1
						this.state = index
						this.list = []
						$('.mui-pull-bottom-pocket').css('display', 'block !important')
						$(".noshopp").hide()
						mui('#pullrefresh').pullRefresh().refresh(true);
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					},
					release: function(data) {
						common.open('comment.html', 'comment.html', data)
					}
				},
			})

			if(JSON.parse(localStorage.getItem('userMyName'))) {
				comments.userName = JSON.parse(localStorage.getItem('userMyName'))
			} else {
				common.ajax('/p/userhome', {}, function(data) {
					if(data.code == 1) {
						comments.userName = data.data
						localStorage.setItem('userMyName', JSON.stringify(data.data))
					} else {
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}
				}, false, 'get')
			}

			function pullupRefresh() {
				$(".noshopp").hide()
				$('.mui-pull-bottom-pocket').css('display', 'block !important')
				common.ajax('/userCenter/userComments', {
					curPageNO: comments.pageNum++,
					state: comments.state
				}, function(data) {
					if(data.code == 1) {
						if(comments.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
						if(comments.state == 1) {
							data.data.list.forEach(val => {
								if(val.photos) {
									val.photos = val.photos.substring(0, val.photos.length - 1).split(',')
								}
							})
						}
						comments.list = comments.list.concat(data.data.list)
						if(comments.list.length <= 0) {
							$(".noshopp").show()
							$('.mui-pull-bottom-pocket').css('display', 'none !important')
						} else {
							$(".noshopp").hide()
							$('.mui-pull-bottom-pocket').css('display', 'block !important')
						}
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh()
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}
				}, true, 'get')

			}
		</script>
	</body>

</html>